<template>
  <div class="goods_page">
    <div class="header">
      <div class="first">多开分身，安全高效</div>
      <div class="second">多个账号，同时登陆</div>
      <div class="third"><span style="color: #FFEA00;">【24H自助下单】</span>下载地址就在付款成功界面</div>
      <div class="fouth">多个账号，同时登陆</div>
      <div class="fifth">可以联系<span style="color: #FFEA00;">在线客服</span>一对一指导</div>
    </div>
    <div class="hot_goods">
      <div class="top">
        <span class="title">
          热门商品
        </span>
        <img src="@/assets/img/hot.png" alt="" class="hot">
      </div>
      <div class="goods">
        <div class="goods_item" v-for="goods in goodsList" :key="goods.id" @click="showDetail(goods.id)">
          <div class="img">
            <img :src="goods.image" alt="">
          </div>
          <div class="goods_name">
            {{ goods.name }}
          </div>
          <div class="goods_price">
            <div class="price">
              <span style="font-size: 11px;">￥</span>
              <span style="font-size: 15px;font-weight: 500;">{{goods.price}}</span>
            </div>
            <div class="sales_count" v-if="goods.salesNum">
              <span>已售{{goods.salesNum}}</span>
            </div>
          </div>
        </div>
      </div>
      <div class="tips">
        <div class="text">购买本软件，您将享有免费技术支持和自动更新服务。</div>
        <div class="text"> 我们致力于为您提供最优质的使用体验。</div>
      </div>
    </div>
    <div class="seek_order" @click="kefu">
      <img src="@/assets/img/seek.png" alt="">
    </div>
    <div v-if="show" class="top-order" :class="showOrder ? 'on': 'hide'" id="notice">
      <div v-html="notice" style="margin-bottom: 5px;"></div>
      <div v-html="message"></div>
		</div>

  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, onUnmounted } from 'vue';
import Request from '@/utils/axios';
import { showLoadingToast, closeToast } from 'vant';
import { useRouter } from 'vue-router';
const router = useRouter()
const goodsList = ref<any[]>([])
const noticeList = ref<any[]>([])
let showOrder = ref<boolean>(false)
let currentIndex = ref<number>(0)
let notice = ref<string>('')
let message = ref<string>('')
let timer = ref()
let show = ref<boolean>(false)
const startOrderTimer = () => {
  if (!timer.value) {
    timer.value = setInterval(() => {
      
      showOrder.value = !showOrder.value
      if (showOrder.value) {
        if (currentIndex.value < noticeList.value.length) {
          notice.value = noticeList.value[currentIndex.value].notice
          message.value = noticeList.value[currentIndex.value].message
          currentIndex.value++
        } else {
          currentIndex.value = 0
          notice.value = noticeList.value[currentIndex.value].notice
          message.value = noticeList.value[currentIndex.value].message
          currentIndex.value++
        }
      }
      show.value = true   
    }, 2500);
  }
    
  
}
const showDetail = (id:any) => {
  router.push({path: `/detail`,query:{id:id}})
}
const kefu = () => {
  // window.open('https://work.weixin.qq.com/kfid/kfcc29d7dfa36a355f6','_blank')
  window.location.href = 'https://work.weixin.qq.com/kfid/kfcc29d7dfa36a355f6'
}
// 获取商品列表
const getGoodsList = () => {
  showLoadingToast({
    message: '加载中...',
    forbidClick: true,
  })
  Request.get('/goods').then((res:any) => {
    if (res.data) {
      goodsList.value = res.data;
      closeToast();
    }
  })
}

const getNewly = () => {
  Request.get('/order/newly').then((res:any) => {
    noticeList.value = res.data;
    setTimeout(() => {
      startOrderTimer()
    },500)
  })
}

onMounted(() => {
  getNewly()
  getGoodsList()
})

onUnmounted(() => {
  clearInterval(timer.value)
})
</script>

<style lang="less" scoped>
.goods_page {
  
  .header {
    height: 285px;
    width: 100%;
    background: url('@/assets/img/background.png');
    background-size: 100% 100%;
    overflow: hidden;
    text-align: center;
    // overflow-y: scroll;
    // height: 100%;
    .first {
      margin-top: 65px;
      font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
      font-weight: 550;
      font-size: 32px;
      color: #FFFFFF;
    }
    .second {
      margin-top: 5px;
      font-weight: 400;
      font-size: 18px;
      color: #FFFFFF;
    }
    .third {
      margin-top: 23px;
      font-size: 14px;
      color: #FFFFFF;
    }
    .fouth {
      font-size: 14px;
      margin-top: 5px;
      color: #FFFFFF;
    }
    .fifth {
      font-size: 14px;
      margin-top: 5px;
      color: #FFFFFF;
    }
  }
  .hot_goods {
    margin-top: 28px;
    padding:0 15px;
    .top {
      .title {
        color: #333;
        font-size: 16px;
        font-family: PingFang SC, PingFang SC;
        font-weight: 600;
        vertical-align: top;
      }
      .hot {
        width: 24.5px;
        height: 12.5px;
      }
    }
    .goods {
      margin: 15px 0 15px 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      .goods_item {
        width: 47%;
        height: 201px;
        margin-bottom: 14px;
        border-radius: 12px 12px 12px 12px;
        box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.08);
        display: flex;
        flex-direction: column;
        .img {
          display: flex;
          justify-content: center;
          margin: 25px 0 17px 0;
          img {
            width: 90px;
            height: 90px;
            border-radius: 10px;
          }
        }
        .goods_name {
          padding-left: 10px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 550;
          font-size: 14px;
          color: #333333;
        }
        .goods_price {
          margin-top: 17px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding: 0 10px;
          .price {
            color: #FF0000;
          }
          .sales_count {
            font-size: 11px;
            color: #666;
          }
        }
      }
    }
    .tips {
      text-align: center;
      padding-bottom: 10px;
      .text {
        color: #666;
        font-size: 12px;
      }
    }
  }
  .seek_order {
    position: fixed;
    right: 4.8%;
    bottom: 62px;
    img {
      width: 70px;
      height: 70px;
    }
  }
  //给一个初始位置
	.top-order {
		position: fixed;
		bottom: 77px;
		left: 15px;
		color: #fff;
		opacity: 0;
		background-color: #00000090;
		z-index: 10;
		padding: 10px 15px;
		border-radius: 31px;
    font-size: 10px;
	}
//消失的动画
	.hide {
		animation: pinyis 0.8s ease 0s;
	}
//出现的动画
	.on {
		opacity: 1;
		animation: pingyi 0.8s ease 0s;
	}
//出现
 
	@keyframes pingyi {
		0% {
			transform: translateY(50px);
		}
 
		100% {
			transform: translateY(0px);
		}
	}
//消失
	@keyframes pinyis {
		0% {
			/* 起始状态，元素在原位，不透明 */
			transform: translateY(0);
			opacity: 1;
		}
 
		100% {
			/* 结束状态，元素向上平移一段距离，并完全透明 */
			transform: translateY(-100px);
			/* 根据需要调整平移距离 */
			opacity: 0;
		}
	}
}
</style>